<div th:fragment="wordDict">



    <style>
        /*worddict*/
        .word-head .title {
            margin-bottom: 20px;
            word-wrap: break-word;
            font-size: 36px;
            line-height: 42px;
            color: #101214;
            font-weight: bold;
            padding-left: 0;
            font-family: "Dutch801 Rm BT", "AvertaStd-Semibold", "PingFang SC";
        }
        .word-book_operate[data-v-f7dc086a] {
            display: inline-block;
        }
        .word-book_operate .add[data-v-f7dc086a] {
            margin-right: 10px;
            background: url(https://shared.ydstatic.com/market/souti/web_dict/online/2.4.5/dist/client/img/word_book_add.869e233.png) 50% 50% no-repeat;
            background-size: contain;
        }
        .word-book_operate .added[data-v-f7dc086a] {
            background: url() 50% 50% no-repeat;
            background-size: contain;
        }
        .word-book_operate .add[data-v-f7dc086a], .word-book_operate .voice-setting[data-v-f7dc086a] {
            display: inline-block;
            width: 24px;
            height: 24px;
            position: relative;
            z-index: 1;
        }

        .word-head .phone_con[data-v-91beca9c] {
            display: flex;
        }
        .word-head .phone_con {
            margin: 0 auto 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .word-head .phone_con .per-phone[data-v-91beca9c] {
            font-size: 14px;
            color: #666;
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        .per-phone {
            font-weight: 500;
            background: #f4f5f7;
            padding: 9px 10px;
            border-radius: 20px;
            box-sizing: border-box;
            margin-bottom: 11px;
            font-size: 14px;
        }

        .phraseSpeech[data-v-50a793e2] {
            display: inline-block;
            width: 22px;
            height: 22px;
            vertical-align: top;
            font-size: 0;
            letter-spacing: 0;
        }
        .phraseSpeech .pronounce[data-v-50a793e2] {
            display: block;
            width: 100%;
            height: 100%;
            background: url(https://shared.ydstatic.com/market/souti/web_dict/online/2.4.5/dist/client/img/ic_result_voice_00.1048cc2.png) 50% 50% no-repeat;
            background-size: contain;
            -webkit-tap-highlight-color: rgba(255,0,0,0);
        }


        .simple .word-exp[data-v-3af46250] {
            font-size: 16px;
        }
        .word-exp {
            display: flex;
        }

        .simple .word-exp .pos[data-v-3af46250] {
            float: left;
            font-family: Georgia;
            font-style: italic;
            font-weight: normal;
            font-size: 14px;
            line-height: 16px;
            color: #939599;
        }
        .simple .word-exp .pos + .trans[data-v-3af46250] {
            margin-left: 24px;
        }
        .simple .word-exp .trans[data-v-3af46250] {
            margin: 0 0 16px 0;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #101214;
        }

        .simple .exam_type[data-v-3af46250] {
            font-size: 14px;
            line-height: 17px;
            color: #939599;
            margin: 16px 0 32px 50px;
            word-break: break-all;
        }
        .simple .exam_type[data-v-3af46250] {
            font-size: 14px;
            line-height: 17px;
            color: #939599;
            margin: 16px 0 32px 50px;
            word-break: break-all;
        }
        .simple .exam_type[data-v-3af46250] {
            font-size: 14px;
            line-height: 17px;
            color: #939599;
            margin: 16px 0 32px 50px;
            word-break: break-all;
        }

        .simple .word-wfs[data-v-3af46250] {
            margin-top: 12px;
            border: 1px solid #eeeff0;
            box-sizing: border-box;
            border-radius: 10px;
            overflow: hidden;
        }
        .word-wfs[data-v-3af46250] {
            position: relative;
            margin-top: 12px;
            overflow: hidden;
        }
        .simple .word-wfs .word-wfs-cell[data-v-3af46250] {
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }
        .simple .word-wfs .grey[data-v-3af46250] {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #939599;
            background: #f4f5f7;
        }
        .simple .word-wfs .word-wfs-cell[data-v-3af46250] {
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }
        .simple .word-wfs .transformation[data-v-3af46250] {
            padding: 20px;
            min-height: 30px;
            line-height: 30px;
            display: block;
        }

    </style>
    <div class="m-modal" id="wordDictModal">
        <div class="m-modal-dialog">
            <div class="m-top">
                <h4 class="m-modal-title">
                    字典
                </h4>
                <span class="m-modal-close">&times;</span>
            </div>
            <div class="m-middle">
                <div class="simple-explain" data-v-8a3f27f6="">
                    <div class="simple-explain_text" data-v-8a3f27f6="">
                        <!---->
                        <!---->
                        <div class="ec dict-module" data-v-91beca9c="" data-v-8a3f27f6="">
                            <div class="trans-container" data-v-91beca9c="">
                                <div class="word-head" data-v-91beca9c="">
                                    <!---->
                                    <div class="title" data-v-91beca9c="">
                                        <span id="wordDictName">name</span>
                                        <div class="word-book_operate word-operate_comp" data-v-f7dc086a="" data-v-91beca9c="">
                                            <a href="javascript:void(0);" onclick="wordDictCollect(this)" id="wordCollect"  class="word-operate add" data-v-f7dc086a="">
                                            </a>
                                        </div>
                                        <!---->
                                    </div>
                                    <div class="phone_con" data-v-91beca9c="">
                                        <div class="per-phone" data-v-91beca9c="">
                                            <span data-v-91beca9c=""> 英 </span>
                                            <span class="phonetic" id="ukPhoneticSymbol" data-v-91beca9c=""> / neɪm / </span>
                                            <div class="phraseSpeech phonetic-speech" data-v-50a793e2="" data-v-91beca9c="">
                                                <a title="点击发音" href="javascript:playWordDict(1);" class="pronounce" data-v-50a793e2="">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="per-phone" data-v-91beca9c="">
                                            <span data-v-91beca9c=""> 美 </span>
                                            <span class="phonetic" id="usPhoneticSymbol" data-v-91beca9c=""> / neɪm / </span>
                                            <div class="phraseSpeech phonetic-speech" data-v-50a793e2="" data-v-91beca9c="">
                                                <a title="点击发音" href="javascript:playWordDict(2);" class="pronounce" data-v-50a793e2="">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!---->
                            </div>
                        </div>
                        <!---->
                        <!---->
                    </div>
                </div>
                <div id="catalogue_author" class="catalogue_tabs catalogue_author" data-v-08c0bb43=""
                     data-v-8a3f27f6="">
                    <div class="dict-book" data-v-08c0bb43="">
                        <div class="simple dict-module" data-v-3af46250="" data-v-08c0bb43="">
                            <div class="trans-container" data-v-3af46250="">
                                <!---->
                                <ul class="basic"  data-v-3af46250="">
                                    <div id="wordFeatureList"></div>
                                    <!--                                          <li class="word-exp" data-v-3af46250="">-->
                                    <!--                                            <span class="pos" data-v-3af46250="">-->
                                    <!--                                                n.-->
                                    <!--                                            </span>-->
                                    <!--                                            <span class="trans" data-v-3af46250="">-->
                                    <!--                                                名字，名称；名声，名誉；&lt;非正式&gt;名人，有名的事物；（侮辱人的）绰号，别称；（英国）属劳埃德保险社辛迪加的承保人-->
                                    <!--                                            </span>-->
                                    <!--                                          </li>-->
                                    <div class="exam_type" id="levelTag" data-v-3af46250="">
                                        <!--                                            <span class="exam_type-value" data-v-3af46250=""> 初中 </span>-->
                                        <!--                                              <span class="exam_type-splice" data-v-3af46250=""> / </span>-->
                                    </div>
                                    <!---->
                                    <ul class="word-wfs" data-v-3af46250="" id="structureBlock">
                                    </ul>
                                </ul>
                            </div>
                            <!---->
                        </div>
                    </div>
                </div>
            </div>
            <!--                  <div class="m-bottom">-->
            <!--                      <button class="m-btn-sure">确定</button>-->
            <!--                      <button class="m-btn-cancel">取消</button>-->
            <!--                  </div>-->
        </div>
    </div>
    <!--          <button class="btn1">点击我，打开</button>-->
    <!--          <script type="text/javascript" th:src="@{/blog/js/jquery.my-modal.1.1.min.js}"></script>-->
    <script>
        var m1 = new MyModal.modal(function() {
            // alert("你点击了确定");
        },{"id":'wordDictModal'});
        // m1.show();
        $('.btn1').on("click", function() {
            // var str='<li ondblclick="jumpToTime(this)" data="1000" style="background: white;"><i></i>\n' +
            //     '  <span>00:00:01.0</span>\n' +
            //     '    <a onclick="correctSubtitle(this)" data="489" class="inputsub-subtitle">纠正</a>\n' +
            //     '    <a onclick="setSubtitlePracticeLevel(this)" data="489" class="inputsub-subtitle-practice">难度</a>\n' +
            //     '    <a onclick="subtitleCollect(this)" data="489" class="inputsub-subtitle-collect">未收藏</a>\n' +
            //     '    <p><a href="javascript:void(0)">中文：好吧 我怎么会这样？</a></p>\n' +
            //     '    <p> 英文： \n' +
            //     '    <a type="en" word="Okay" specialchar="false" href="javascript:void(0)" onclick="showWordDictModal(this)" style="background: aliceblue;">Okay </a> \n' +
            //     '    </p>\n' +
            //     '</li>';
            // $("#subtitleBlock").append(str);

        });

        var wordCollect = false;

        function showWordDictModal(obj){
            var specialChar = $(obj).attr("specialChar");
            if(specialChar == "fase"){
                return;
            }
            var word = $(obj).attr("word");
            // debugger;
            renderWordDict(word,function(res){
                if(res.success){
                    m1.show();
                }
            });
        }

        function renderWordDict(name,callback){
            // debugger;
            var param = {name:name};
            var url = "/cmsEnglish/getWordDict";
            $.ajax({type:"GET",url:url,dataType:'JSON', contentType:'application/json', data:param,success:function(result){
                    if(result.success){
                        let data = result.data;
                        wordCollect = data.collect;
                        if(data.collect){
                            $("#wordCollect").addClass("added");
                        }else{
                            $("#wordCollect").removeClass("added");
                        }
                        $("#wordDictName").html(data.name);
                        $("#ukPhoneticSymbol").html("/"+data.ukPhoneticSymbol+"/");
                        $("#usPhoneticSymbol").html("/"+data.usPhoneticSymbol+"/");

                        $("#structureBlock").html('');
                        var structureMap = {'复数':data.nounPlural,'第三人称单数':data.thirdSingle,'现在分词':data.participle,'过去式':data.pastTense,'过去分词':data.pastParticiple,'比较级':data.comparative,'最高级':data.superlative};
                        for(var key in structureMap){
                            var val = structureMap[key];
                            if(val){
                                var str = '<li class="word-wfs-cell" style="width:18%;" data-v-3af46250="">\n' +
                                    '           <p class="grey" data-v-3af46250="">\n' +
                                    '               <span class="wfs-name" data-v-3af46250=""> '+key+' </span>\n' +
                                    '               <span class="wfs-splice" data-v-3af46250=""> </span>\n' +
                                    '           </p>\n' +
                                    '           <span class="transformation" data-v-3af46250="" > '+val+' </span>\n' +
                                    '           </li>';
                                $("#structureBlock").append(str);
                            }
                        }
                        // $("#nounPlural").html(data.nounPlural);
                        // $("#thirdSingle").html(data.thirdSingle);
                        // $("#participle").html(data.participle);
                        // $("#pastTense").html(data.pastTense);
                        // $("#pastParticiple").html(data.pastParticiple);
                        // debugger;

                        $("#wordFeatureList").html('');
                        for(var key in data.wordFeatureMap){
                            var val = data.wordFeatureMap[key];
                            var str = '<li class="word-exp" data-v-3af46250="">'+
                                '<span class="pos" data-v-3af46250="">'+
                                key+'.'+
                                '</span>'+
                                '<span class="trans" data-v-3af46250="">'+val+'</span>'+
                                '</li>';
                            $("#wordFeatureList").append(str);
                        }

                        $("#levelTag").html('');
                        data.levels.forEach(function(item,index,array){
                            var str = '<span class="exam_type-value" data-v-3af46250=""> '+item+' </span>' +
                                '<span class="exam_type-splice" data-v-3af46250=""> / </span>';
                            $("#levelTag").append(str);

                        });
                    }else{
                        $.message({type:'warning',content:result.message || '没有查到您要的单词'});
                    }
                    callback(result);
                }});
        }

        function wordDictCollect(obj){
            var param = {name:$("#wordDictName").html(),status:wordCollect?0:1};
            $.ajax({type:"POST",url:'/cmsEnglish/wordCollect',dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
                    if(result.success){
                        if(wordCollect){
                            $(obj).removeClass("added");
                            wordCollect = false;
                            $.message({type:'success',content:"取消收藏成功"});
                        }else{
                            $(obj).addClass("added");
                            wordCollect = true;
                            $.message({type:'success',content:"收藏成功"});
                        }
                    }else{
                        $.message({type:'error',content:result.message || '收藏操作失败'});
                    }
                }});
            //
        }

        function playWordDict(type){
            var audio = document.createElement("audio");
            var wordDictName = $("#wordDictName").html();
            audio.src = "https://dict.youdao.com/dictvoice?audio="+wordDictName+"&type="+type;
            audio.controls = true
            audio.play();
        }

    </script>

</div>
